<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="operate-dialog"
        :close-on-click-modal="false"
        destroy-on-close
        :model-value="['add', 'edit'].includes(state.form.operate!)"
        draggable
        @close="state.toggleForm('')">
        <template #header>
            <div class="title">
                {{ state.form.operate === 'add' ? '上传视频文件' : '编辑' }}
            </div>
        </template>
        <el-scrollbar v-loading="state.form.loading" class="table-form-scrollbar" height="400px">
            <div :class="`operate-form ${state.form.operate}-form`" :style="{ width: '100%' }">
                <el-form
                    v-if="!state.form.loading"
                    ref="formRef"
                    :model="state.form.items"
                    :label-width="state.form.labelWidth + 'px'"
                    :rules="rules"
                    @keyup.enter="state.onSubmit(formRef)">
                    <el-form-item prop="app" label="流的应用名">
                        <el-input v-model="state.form.items!.app" disabled  placeholder="请输入流的应用名"></el-input>
                    </el-form-item>
                    <el-form-item prop="stream" label="流的名称">
                        <el-input v-model="state.form.items!.stream" placeholder="请输入流的名称"></el-input>
                    </el-form-item>
                    <el-form-item label="视频文件">
                        <el-upload
                            ref="uploadRef"
                            :action="`${PUBLIC_PATH}/api/web/virtual-video-stream/add`"
                            :limit="1"
                            :data="state.data.data"
                            :headers="{ token: useToken.token }"
                            accept=".mp4,.avi"
                            :auto-upload="false"
                            :on-success="onSuccess"
                            :on-progress="onProgress"
                            :before-upload="beforeUpload">
                            <template #trigger>
                                <el-button type="primary">选择视频文件</el-button>
                            </template>
                            <template #tip>
                                <div class="el-upload__tip text-red">只能选择1个视频文件，大小不能超过50M</div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="{ width: '100%', textAlign: 'center' }">
                <el-button @click="state.toggleForm('')">取消</el-button>
                <el-button :loading="state.form.submitLoading" type="primary" @click="onSubmit">
                    {{ state.form.operate === 'add' ? '上传' : '编辑' }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref, reactive, watch } from 'vue';
import { ElMessage, FormInstance, FormItemRule, UploadInstance } from 'element-plus';
import { buildValidatorData } from '@/utils/validate';
import { TableState } from '@/components/table/table';
import { VirtualVideoStreamTableDataState, VirtualVideoStreamTableDialogState } from '@/views/admin/virtualvideostream/interface';
import { useTokenStore } from '@/stores/token';
import { PUBLIC_PATH } from '@/constant';
import type { UploadProps } from 'element-plus';

const useToken = useTokenStore();
const formRef = ref<FormInstance>();
const uploadRef = ref<UploadInstance>();
const state = inject('state') as TableState<VirtualVideoStreamTableDataState, VirtualVideoStreamTableDialogState>;

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    app: [buildValidatorData({ name: 'required', title: '流的应用名' })],
    stream: [buildValidatorData({ name: 'required', title: '流的名称' })],
});

const onSubmit = () => {
    formRef.value?.validate().then(() => {
        state.data.data.app = state.form.items!.app;
        state.data.data.stream = state.form.items!.stream;
        // @ts-ignore
        uploadRef.value.submit();
    });
};

const onSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    state.onTableAction('refresh', {});
  state.form.operate = '';
};

const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'video/mp4' && rawFile.type !== 'video/avi') {
        ElMessage.error('请选择MP4或者AVI文件');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 200) {
        ElMessage.error('视频大小不能超过200M!');
        return false;
    }
    return true;
};

const onProgress : UploadProps['onProgress'] = (evt, uploadFile, uploadFiles) => {
   // console.log(evt);// percent
};
</script>
